<template>
  <div class="Setting">
    <div class="MsgSetting">
      <div class="MsgInner">
        <span>昵称</span>
        <el-input v-model="user.nickname"></el-input>
        <span>密码</span>
        <el-input v-model="user.password" show-password></el-input>
        <span>性别</span>
        <el-radio v-model="user.gender" label="男">男生</el-radio>
        <el-radio v-model="user.gender" label="女">女生</el-radio>
        <span>出生年月</span>
        <el-date-picker
          v-model="user.birthday"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <span>邮箱</span>
        <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
        <span>个人简介</span>
        <el-input
          resize="none"
          type="introduction"
          :rows="4"
          placeholder="请输入内容"
          v-model="user.info"
        >
        </el-input>
        <br />
        <el-button type="primary" @click="updateUser()">更新基本信息</el-button>
      </div>
    </div>
    <div class="HeadSetting">
      <div class="HeadInner">
        <img :src="user.avatar" alt="" />
        <el-upload
          class="upload-demo"
          action="http://localhost:8888/api/upload"
          :on-success="uploadSuccess"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
        <span>只能上传jpg/png图片</span>
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserInfo, userUpdate } from "@/api/user.js";
export default {
  name: "BasicSetting",
  data() {
    return {
      filename: "",
      user: {
        id: "",
        username: "",
        password: "",
        nickname: "",
        email: "",
        birthday: "",
        gender: "",
        info: "",
        avatar: "",
      },
      isLogin: false,
    };
  },
  methods: {
    uploadSuccess: function (res) {
      this.user.avatar = res.data;
    },
    queryUser() {
      if (localStorage.getItem("uid") !== null) {
        GetUserInfo(localStorage.getItem("uid")).then((res) => {
          this.isLogin = true;
          this.user = res.data;
          this.user.password = "";
        });
      }
    },
    updateUser: function () {
      userUpdate(
        this.user.id,
        this.user.username,
        this.user.password,
        this.user.nickname,
        this.user.email,
        this.user.birthday,
        this.user.gender,
        this.user.info,
        this.user.avatar
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "更新失败",
            type: "warning",
          });
        }
      });
    },
  },
  mounted() {
    this.queryUser();
  },
};
</script>

<style scoped lang="less">
.Setting {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  .MsgSetting {
    width: 50%;
    height: 100%;
    span {
      display: block;
      margin: 20px 0 10px 0;
    }
    .MsgInner {
      margin: 40px 0 0 40px;
      .el-input {
        width: 50%;
      }
      .el-textarea {
        width: 50% !important;
      }
      .el-button {
        margin-top: 20px;
      }
    }
  }
  .HeadSetting {
    width: 50%;
    .HeadInner {
      margin: 20px 0 0 20px;
      display: flex;
      flex-direction: column;
      img {
        width: 150px;
      }
      .el-button {
        width: 150px;
        margin-top: 20px;
      }
      span {
        margin-top: 20px;
      }
    }
  }
}
</style>